<template>
  <div class="dynamic">
    <div class="top">
      <div class="top-left">
        <van-tabs v-model="active" animated>
          <van-tab
            v-for="(item, index) in topData"
            :title="item.title"
            :key="index"
            :thumb="imgSrc + item.cover"
          >
          </van-tab>
        </van-tabs>
      </div>
    </div>

    <div class="ting">
      <div>
        <van-empty description="没有更新节目" v-if="active == 0">
          <van-button round type="danger" class="bottom-button" @click="goToList"
            ><van-icon name="plus" color="#fff" />去订阅节目</van-button
          >
        </van-empty>

        <van-empty description="没有订阅过的节目" v-else-if="active == 1">
          <van-button round type="danger" class="bottom-button" @click="goToList"
            ><van-icon name="plus" color="#fff" />去订阅节目</van-button
          >
        </van-empty>

        <div class="liShi" v-else>
          <div class="card" v-for="(item,index) in item" :key="index">
            <van-card
              :desc="item.salePoint"
              :title="item.title"
              :thumb="imgSrc + item.cover"
            >
              <template #tags>
                <van-tag plain type="danger">{{item.isVipFirst == false? '免费':'Vip'}}</van-tag>
              </template>
              
            </van-card>
          </div>

        </div>
      </div>
    </div>

    <div class="ding">
      <div></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "dynamic",
  data() {
    return {
      active: 0,
      imgSrc: "//imagev2.xmcdn.com/",
      topData: [
        {
          title: "听更新",
        },
        {
          title: "订阅",
        },
        {
          title: "历史浏览",
        },
      ],
      lishiData:[],
      item:[
        
      ],
      idData:[]
    };
  },
  created(){
    this.getLiShi();
    this.idData.forEach((ele) =>{

      this.searchLishi(ele);
    })
  },
  methods: {
    searchLishi(id) {
      this.axios({
        methods: "get",
        url: "https://apis.netstart.cn/ximalaya/album/queryAlbumPage" + "/" + id,
        params: {

        },
      })
        .then((result) => {
          // console.log(result.data.data.albumDetailInfo.albumInfo);
          this.item.push(result.data.data.albumDetailInfo.albumInfo);
          // console.log(this.item);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getLiShi() {
      if (!localStorage.getItem("id")) {
        this.idData = [];
      } else {
        let result = Array.from(new Set(JSON.parse(localStorage.getItem("id"))));
        this.idData = result;
      }
    },
    goToList() {
      this.$router.push({name:'List'});
    }
  },
};
</script>

<style lang="less" scoped>
.date-time{
  padding: 0 5px;
  font-size: 14px;
  color: #ccc;
}
.dynamic{
  padding-bottom: 50px;
}
</style>